<template>
<view class="xuqiu">
	<view class="top_img">
		<image :src="data.thumb||'https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ymt_new/my/xx_bg.png'" mode="widthFix" style="height: auto"></image>
	</view>
	<!-- <view class="h10"></view> -->
	<view class="card">
		<view class="c_t">{{data.name}}</view>
		<view class="chain_view" :class="index!=0?'chain_view1':''" v-if="data.chain_names.length>0" v-for="(chain,index) in data.chain_names.slice(0,2)" :key="index">{{chain}}</view>
		
		<view class="c_xx c_cc">
			公司  <text @click='toDetail'>{{data.company_name}}</text>
		</view>
		<view class="c_xx">
			地址  <text>{{data.city_names||'-'}}</text>
		</view>
		<view class="c_xx c_ccc" v-if='data.news_url||data.news_id'>
			来源  <text @click='toNews'>查看来源</text>
		</view>
		
		<view class="flex_sb">
			<view class="c_xx" v-if="data.from==3">
				<view class="">产值</view>
				 <text class="c_xx_color">{{data.output_value||'-'}}</text>
			</view>
			<view class="c_xx" v-if="data.from==3">
				<view class="">税收</view>
				 <text class="c_xx_color">{{data.tax||'-'}}</text>
			</view>
		</view>
		<view class="flex_sb">
			<view class="c_xx" v-if="data.from==3">
				<view class="">投资金额</view>
				 <text class="c_xx_color">{{data.invest_money||'-'}}</text>
			</view>
			<view class="c_xx" v-if="data.from==3">
				<view class="">占地面积</view>
				 <text class="c_xx_color">{{data.area||'-'}}</text>
			</view>
		</view>
		<view class="flex_sb">
			<view class="c_xx" v-if="data.from==3">
				<view class="">投资来源</view>
				 <text class="c_xx_color">自筹 </text>
			</view>
		</view>
		<view class="flex_sb">
			<view class="c_xx" v-if="data.from==3">
				<view class="">意向区域</view>
				 <text>{{data.intent_area||'-'}}</text>
			</view>
		</view>
		
		<view class="c_xx">
			<view class="">需求条件</view>
			 <text>{{data.condition||'-'}}</text>
		</view>
	</view>
	<view class="h30"  v-if="data.desc"></view>
	<view class="card" v-if="data.desc">
		<view class="c_title">简介</view>
		<view class="c_desc" >
			<!-- <rich-text style="user-select: text; -webkit-user-select: text;" class="desc_t" :nodes="data.desc"></rich-text> -->
		  <text decode="true">{{data.desc}}</text>	
		</view>
	</view>
	<view class="h30"  v-if="data.content"></view>
	<view class="card" v-if="data.content">
		<view class="c_title">详情</view>
		<view class="c_desc" >
			<mp-html class="content" :content="data.content" />
		  <!-- <text decode="true">{{data.content}}</text>	 -->
		</view>
	</view>
	<view class="h30"></view>
	<view class="card" v-if="data.imgs.length>0">
		<image lazy-load="" v-for="i,k in data.imgs" :key="k" :src="i" mode="widthFix" style="height: auto" @click="img_yl(k)"></image>
	</view>
	
	<view class="h160"></view>
	<view class="b_b flex_ac flex_sb">
		<view class="flex_ac">
			<view class="b_b_item">
				<image src="https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ymt_new/icon_sc.png" mode="heightFix"></image>
				<view class="">收藏</view>
			</view>
			<view class="b_b_item" @click="open">
				<image src="https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ymt_new/icon_zf.png" mode="heightFix"></image>
				<view class="">转发</view>
			</view>
			<view class="b_b_item">
				<image src="https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ymt_new/icon_zx.png" mode="heightFix"></image>
				<view class="">咨询</view>
			</view>
		</view>
		<view class="btn_price" @click='$refs.inputDialog.open()'>
			咨询联系
		</view>
	</view>
	
	
	<uni-popup ref="inputDialog" type="dialog">
		<view class="xx_div">
			<view class="xx_close" @click='$refs.inputDialog.close()'>
				<image src="https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ymt_new/close.png" mode=""></image>
			</view>
			<view class="xx_title">
				咨询联系
			</view>
			<view class="h20"></view>
			<view class="xx_btn" @click="phone('my')">
				400-962-5108
			</view>
			<view class="h40" v-if="data.mobile"></view>
			<view class="xx_btn" v-if="data.mobile" @click="phone">
				{{data.mobile}} <text>(直联)</text>
			</view>
		</view>
	</uni-popup>
	
	
	<open ref="open" :ishb='false'></open>
	
	<showNum ref='showNum' type_id='4' :ra_id="id"></showNum>
</view>
</template>

<script>
	import { GetBusinessclueDetail , CreateOrder,GetUseInfo } from '@/utils/api.js'
	import open from '@/components/open/open.vue'
	import showNum from '@/components/showNum.vue'
	export default {
		data() {
			return {
				data:{},
				id:''
			}
		},
		async onLoad(option){
			this.id = option.id
			await GetBusinessclueDetail({id:option.id}).then(res=>{
				this.data = res.data
				
				uni.setNavigationBarTitle({
					title:res.data.name
				})
				return true
			})
			// this.$nextTick(()=>{
			// 	this.$refs.showNum.init()
			// })
		},
		onShareTimeline() {
			return {
			 title: (this.data.name.length>12? this.data.name.substr(0,12)+'...':this.data.name)+(' | 投资钟祥'),
			 imageUrl:'https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ymt_new/my/ymt_logo_share.png'
			}
		},
		onShareAppMessage() {
			return {
				title: (this.data.name.length>12? this.data.name.substr(0,12)+'...':this.data.name)+(' | 投资钟祥'),
			}
		},
		onShow(){
		
		},
		components:{open,showNum},
		methods: {
			img_yl(index){
				uni.previewImage({
					urls:this.data.imgs,
					current:index
				})
			},
			phone(type){
				let phoneNumber
				if(type){
					phoneNumber = '400-962-5108'
				}else{
					phoneNumber = this.data.mobile
				}
				uni.makePhoneCall({
						phoneNumber  //仅为示例
				});
			},
			pay(){ 
				uni.makePhoneCall({
						phoneNumber: this.data.mobile||'400-962-5108' //仅为示例
				});
			},
			toDetail(){
				if(!this.data.identification){
					uni.showToast({
						title:'请电话联系咨询',
						icon:'none'
					})
					return
				}
				uni.navigateTo({
					url:`/pages/companyDetail/companyDetail?identification=${this.data.identification}`
				})
			},
			toNews(){
				if(this.data.news_id){
					uni.navigateTo({
						url:`/pages/newsDetail/newsDetail?id=${this.data.news_id}`
					})
				}else{
					uni.setClipboardData({
						data: this.data.news_url, //当前点击的地址
						success: () => {
							//获取刚复制好的地址到剪切板，
							uni.getClipboardData({
								success: () => {
									uni.showToast({
										title: '已复制地址成功 请在浏览器打开'
									})
								}
							});
						}
					});
				}
			},
			open(){
				this.$refs.open.show()
			},
		}
	}
</script>

<style scoped lang="scss">
page,.xuqiu{
	width: 100%;
	background: #f0f0f0;
	overflow-x: hidden;
	min-height: 100%;
	.top_img{
		width: 100%;
		background: #f0f0f0;
		padding: 30rpx 30rpx 10rpx;
		image{
			width: calc(100% - 60rpx);
			border-radius: 16rpx;
			box-shadow: 0 2px 4px 0 #0003;
		}
	}
	.card{
		margin: 0 30rpx;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		overflow: hidden;
		background: #fff;
		padding: 20rpx;
		.c_t{
			font-size: 32rpx;
			font-weight: 800;
		}
		.c_title{
			font-size: 28rpx;
			font-weight: 800;
		}
		.c_desc{
			font-size: 24rpx;
			color: #666;
			margin-top: 20rpx;
		}
		.chain_view{
			background-color: #FF653211;
			color: #FF6532;
			padding: 0 16rpx;
			height: 42rpx;
			line-height: 42rpx;
			border-radius: 21rpx;
			font-size: 24rpx;
			margin: 20rpx 10rpx 0 0;
			display: inline-block;
		}
		.chain_view1{
			color: #12D998;
			background-color: #12D99811;
		}
		.chain_view2{
			color: #f93;
			background-color: #ff993333;
		}
	}
	.c_xx{
		font-size: 28rpx;
		color: #666;
		margin: 20rpx 0;
		width: 100%;
		display: flex;
		text,.text{
			color:#333;
			margin-left: 30rpx;
			display: inline-block;
			max-width:calc(100% - 170rpx);
		}
		view{
			width:120rpx;
			text-align-last:justify;
			text-align:justify
		}
		.c_xx_color{
			color:red
		}
	}
	.c_cc{
		text{
			color:#FF6532;
			margin-left: 30rpx;
			display: inline-block;
			text-decoration: underline;
		}
	}
	.c_ccc{
		text{
			color:#468dff;
			margin-left: 30rpx;
			display: inline-block;
			text-decoration: underline;
		}
	}
}
.b_b{
	position: fixed;
	bottom: 0px;
	width: calc(100% - 60rpx);
	height: 120rpx;
	background: #fff;
	padding: 0 30rpx;
	.b_b_item{
		color:#888;
		font-size: 24rpx;
		width: 100rpx;
		image{
			height: 50rpx;
		}
	}
}
.btn_price{
	padding: 0 30rpx;
	height: 60rpx;
	line-height: 60rpx;
	border-radius: 30rpx;
	background: linear-gradient(#FD8A54,#F8453D);
	box-shadow: 0rpx 16rpx 32rpx 0rpx rgba(253,39,38,0.36);
	color: #fff;
	font-size: 28rpx;
}
.xx_div{
	width: 460rpx;
	border-radius: 20rpx;
	background: #fff;
	color: #333;
	font-size: 24rpx;
	padding: 50rpx 10rpx;
	position: relative;
	.xx_title{
		font-size: 32rpx;
		font-weight: 800;
		color: #333;
		text-align: center;
		margin-bottom: 30rpx;
	}
	.xx_close{
		position: absolute;
		right: 10rpx;
		top: 4rpx;
		width: 48rpx;
		height: 48rpx;
		image{
			width: 48rpx;
			height: 48rpx;
		}
	}
	.xx_desc{
		color: #666;
		text-indent:48rpx;
		line-height: 40rpx;
	}
	.xx_btn{
		width: 380rpx;
		margin: 0 auto;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: linear-gradient(100deg,#FD8755,#FB2E20);
		color: #fff;
		font-size: 32rpx;
		border-radius: 12rpx;
		text{
			font-size:28rpx;
		}
	}
}

</style>
